import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_master/view/CustomRRecTabIndicator.dart';

class ProjectPage extends StatefulWidget {
  ProjectPage({Key key}) : super(key: key);

  @override
  _ProjectPageState createState() => _ProjectPageState();
}

class _ProjectPageState extends State<ProjectPage>
    with SingleTickerProviderStateMixin {
  TabController mController;
  List tabList = ["男装", "女装", "家电"];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    mController = new TabController(length: tabList.length, vsync: this);
    mController.addListener(() {
      print(mController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(MediaQueryData.fromWindow(window).padding.top),
        child: SafeArea(
          top: true,
          child: Offstage(),
        ),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              alignment: Alignment.center,
              child: TabBar(
                controller: mController,
                // isScrollable: true,是否滑动
                labelPadding: EdgeInsets.only(left: 8, right: 8),
                indicator: CustomRRecTabIndicator(
                    radius: 15.0, color: Color(0xFF5582F3), width: 12),
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 0,
                labelColor: Colors.white,
                labelStyle: TextStyle(fontSize: 15, color: Colors.white),
                unselectedLabelColor: Color(0xFF2B2B2B),
                tabs: tabList.map((value) {
                  return Container(
                    child: Text(value),
                    decoration: BoxDecoration(
                      // color: Colors.red,
                      // backgroundBlendMode: BlendMode.luminosity,
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    ),
                    padding:
                        EdgeInsets.only(top: 4, bottom: 4, left: 18, right: 18),
                  );
                }).toList(),
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: mController,
                children: [Text('男装'), Text('女装'), Text('家电')],
              ),
            )
          ],
        ),
      ),
    );
  }
}
